<template>
  <view class="publish-container">
    <!-- 分类标题 -->
    <uni-section title="帖子类别" type="line" titleFontSize="22" titleColor="#0c75ff" class="type">
      <uni-data-select v-model="value" :localdata="typeList" @change="changeType"></uni-data-select>
    </uni-section>
    <uni-section title="帖子内容" type="line" titleFontSize="22" titleColor="#0c75ff" class="content">
      <!-- 内容 -->
      <view class="content-area">
        <div class="content-input" @click="getFocus">
          <input :focus="focusState" @blur="focusState = false" ref="inp" v-model="content"
            placeholder-class="placeholder-class" class="inp" type="text" placeholder="写下你想要分享的内容吧...." />
        </div>
        <!-- 图片上传 -->
        <uni-file-picker file-mediatype="image" limit="1" class="upload" ref="pic" @select="getPicPath"></uni-file-picker>
      </view>
    </uni-section>
    <!-- 上传按钮 -->
    <view class="btn">
      <button class="publish" type="default" @click="ToPublish">发布</button>
    </view>

    <!-- 弹窗 下面弹出 -->
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType" :message="tips" duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import { publishForumAsync } from '@/api/forum.js'
export default {
  data () {
    return {
      // 分类
      value: '',
      // 分类列表，等待接口数据
      typeList: [
        { value: 0, text: '篮球' },
        { value: 1, text: '足球' },
        { value: 2, text: '游泳' }
      ],
      // 内容
      content: '',
      // 图片路径
      picPath: '',
      // 弹窗内容
      tips: '',
      msgType: '',
      // 输入框焦点状态
      focusState: false,
      userId: ''
    };
  },

  mounted () {
    this.userId = this.$store.state.user.token;

  },
  methods: {
    // value  分类的值
    changeType (value) {
      // e 获取对应typeList的value
      console.log('e:', value);
    },
    // 获取图片的临时路径
    getPicPath () {
      this.picPath = this.$refs.pic._data.files[0].path;
    },
    // 弹窗弹出封装
    messageToggle (type, msg) {
      this.msgType = type;
      this.tips = msg;
      this.$refs.message.open();
    },
    // 发布按钮
    async ToPublish () {
      if (this.userId.trim() === "") {
        return this.messageToggle('error', '请先登录！')
      }
      if (this.value === '') return this.messageToggle('error', '请选择帖子的分类！');

      if (this.content.trim() === '') return this.messageToggle('error', '不可以拒绝分享内容！');

      // 测试输出
      console.log(this.value, this.content, this.picPath);
      // 数据提交接口,返回论坛界面
      try {
        const res = await publishForumAsync({
          userId: this.userId,
          content: this.content
        })
        uni.navigateBack({
          complete: function () {
            uni.$emit('forum', { data: 1 });
          }
        });
      } catch (error) {

        console.log('%c [  ]-110', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },

    // 优化，点击灰色区域输入框获取焦点
    getFocus () {
      this.focusState = true;
    },



  }
};
</script>

<style lang="scss">
.publish-container {
  background-color: #fff;

  .type {
    .uni-stat__select {
      width: 90%;
      margin: 0 auto;
    }
  }

  .content {
    .content-area {
      width: 90%;
      margin: 0 auto;
      background-color: #f6f6f6;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;

      .content-input {
        height: 200rpx;

        .inp {
          color: #676767;

          .placeholder-class {
            color: #676767;
          }
        }
      }

      .file-picker__box-content.is-add {
        $color: #bdbdbd;
        border-color: $color !important;

        .icon-add {
          background-color: $color;
        }
      }
    }
  }

  // 退出登录按钮
  .btn {
    margin-top: 40rpx;

    .publish {
      align-items: center;
      background-color: skyblue;
      color: #fff;
      font-size: 32rpx;
    }
  }

  // 弹窗
  .popup-content {
    padding: 10rpx 20rpx;
    text-align: center;

    .text {
      height: 100rpx;
      line-height: 100rpx;
      color: #c00000;
    }
  }
}
</style>
